<template>
  <div id="translateForm">
  <form >
    <input class="lan-input" type="text" placeholder="请输入需要翻译的文本" v-model="textToTranslate"/>
    <select class="lan-input" v-model="language">
      <option value="">请选择</option>
      <option value="en">English</option>
      <option value="it">Italian</option>
      <option value="ko">Korean</option>
      <option value="lb">Luxembourgish</option>

    </select>
    <button class="translate-btn" v-on:click="translate" >翻译</button>
  </form>
    <span class="result"></span>
  </div>
</template>


<script>
  export default {
    name:'translateForm',
    data:function () {
      return{
        textToTranslate:"",
        language:""
      }
    },
    methods:{
      translate:function (e) {
        this.$emit("needToTranslate",this.textToTranslate,this.language);
        e.preventDefault();
      }
    }
  }
</script>


<style>
  html{
    font-size:62.5% ;
  }
  .lan-input{
    width: 20rem;
    padding:0.5rem 2rem;
    border: 1px solid #CDCDCD;
    border-radius: 4px;
    background: #FFFFFF;
    outline: none;
    transition: all 0.3s ease-in-out;
  }
  .lan-input:focus{
    border-color:#66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
  }
  .translate-btn{
    padding: 0.5rem 1rem;
    background: #66afe9;
    border: none;
    border-radius: 5px;
    color: #FFFFFF;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
  }
  .translate-btn:active{
    transform: scale(0.85);
  }
  .result{
    color: #008000;
    font-size: 28px;
    display: inline-block;
    margin-top: 10px;
  }
</style>
